<template>
  <div class="pages-details1 demo">
    <!---------------操作框-------------------------------------------------------------------------------------------------------->
    <div class="tableSearch">
      <el-button @click="goBack" size="mini" type="primary">返回</el-button>
    </div>
    <!---------------表单------------------------------------>
    <el-form
      :model="formData"
      :rules="ruleFormData"
      class="demo-ruleForm"
      label-width="123px"
      ref="dataForm"
      size="small"
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="请选择公告类型" prop="noticeType">
            <el-radio-group v-model="formData.noticeType" :disabled="status!= 3">
              <el-radio
                :key="'dataType'+item.id"
                :label="item.id"
                v-for="item in dataTypeList"
              >{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.noticeType == 3">
        <el-form-item label="请选择公告封面" prop="noticeCover">
          <el-col :span="6" v-for="(item, index) in coverList" :key="index">
            <el-radio v-model="formData.noticeCover" :label="item.value">
              <img :src="item.url" />
            </el-radio>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row>
        <span>公告内容</span>
      </el-row>
      <el-row v-if="formData.noticeType== 3">
        <el-form-item>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>封面内容</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="preCover">预览</el-button> -->
            </div>
            <div>
              <el-form-item label="活动名称" prop="activeName">
                <el-input
                  v-model="formData.activeName"
                  size="small"
                  placeholder="如: 中秋团圆季, 优惠享不停/国庆大促销"
                  maxlength="12"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="活动内容" prop="activeContent">
                <el-input
                  v-model="formData.activeContent"
                  size="small"
                  placeholder="如: 全部商品满100减50/ 部分服务享7折优惠"
                  maxlength="16"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>详情页内容</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="preInfo">预览</el-button>
            </div>
            <div>
              <el-form-item label="活动时间" prop="activeStartTime">
                开始时间
                <el-date-picker
                  v-model="formData.activeStartTime"
                  type="datetime"
                  :clearable="clearable"
                  placeholder="选择开始时间"
                  @change="checkActiveTime"
                  class="goods-active-start"
                ></el-date-picker>
                <!-- :picker-options="pickerOptions" -->
                <br />结束时间
                <el-date-picker
                  v-model="formData.activeEndTime"
                  type="datetime"
                  :clearable="clearable"
                  placeholder="选择开始时间"
                  @change="checkActiveTime"
                  :picker-options="pickerOptions"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="活动对象" prop="activeTarget">
                <el-input
                  v-model="formData.activeTarget"
                  size="small"
                  placeholder="如: 全部会员参加"
                  maxlength="30"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="参加方式">
                <el-input
                  v-model="formData.activeJoinType"
                  size="small"
                  placeholder="如: 需活动期间到店参加"
                  maxlength="30"
                  show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="每人限参加次数">
                <el-select
                  v-model="formData.activeNum"
                  placeholder="请选择"
                  size="small"
                  class="select-search"
                >
                  <el-option
                    v-for="(item, index) in [1,2,3,4,5,6,7,8,9,10]"
                    :key="index"
                    :value="item"
                  >{{item}}</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="活动介绍" prop="activeIntroduce">
                <el-input
                  type="textarea"
                  v-model="formData.activeIntroduce"
                  size="small"
                  placeholder="活动的详细介绍: 可包括活动内容、活动对象、参加方式的详细介绍"
                  maxlength="100"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </div>
          </el-card>
        </el-form-item>
      </el-row>
      <el-row v-else>
        <el-form-item label="商品名称" prop="goodsSelect">
          <el-button
            type="primary"
            size="small"
            @click="dialogTableVisible_good = true;opendialogToPage() "
          >选择商品</el-button>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input
            v-model="formData.goodsName"
            size="small"
            :disabled="goodsInfo"
            maxlength="100"
            class="weight-input"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="5">
            <el-form-item label="商品售价￥" prop="goodsName">
              <el-input
                v-model="formData.goodsPrice"
                size="small"
                :disabled="goodsInfo"
                maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="会员价￥" prop="goodsName">
              <el-input
                v-model="formData.memberPrice"
                size="small"
                :disabled="goodsInfo"
                maxlength="100"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="商品图片" prop="goodsImg">
          <div class="tip">上传图片的最佳尺寸像素: 200像素*300像素，格式png，jpeg，jpg，gif, 大小不超过2M</div>
          <div :class="['imgbox',{'imgbox-v':!formData.goodsImg}]">
            <img :src="formData.goodsImg" alt />
          </div>
          <el-upload
            class="upload-demo"
            action="1"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadSectionFile"
          >
            <el-button class="upload-btn" size="small" type="primary">上传图片</el-button>
          </el-upload>
          <el-button size="small" class="delete-img" @click="deleteImg" :disabled="deletShow">删除</el-button>
        </el-form-item>
        <el-form-item label="商品介绍" prop="goodsIntroduce">
          <el-input v-model="formData.goodsIntroduce" class="weight-input" maxlength="16"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <span>公告上下架时间</span>
      </el-row>
      <el-row>
        <el-form-item label="上架时间" prop="shelfTime" :disabled="status == 1">
          <el-date-picker
            v-model="formData.shelfTime"
            type="datetime"
            :clearable="clearable"
            placeholder="选择开始时间"
            @change="checkEndTime"
            :picker-options="pickerOptions"
            :disabled="status==1"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="下架时间" prop="removeTime">
          <el-date-picker
            v-model="formData.removeTime"
            type="datetime"
            :clearable="clearable"
            placeholder="选择下架时间"
            @change="checkEndTime"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="设置权重" prop="weight">
          <el-input
            v-model="formData.weight"
            size="small"
            class="weight-input"
            @keyup.native="onLimitNumber"
          ></el-input>
          <div class="tip">权重值越大, 公告排序越靠前, 权重值为正整数,可输入范围0-10000</div>
        </el-form-item>
      </el-row>
    </el-form>
    <div class="dash-line"></div>
    <el-button type="primary" size="small" @click="onNewNotice('dataForm')">保存</el-button>

    <!-------------------预览弹框------------>
    <el-dialog title="预览" :visible.sync="dialogPreviewVisible" width="375px" class="preview-dialog">
      <div class="preview-container">
        <!-- 预览封面 -->
        <div></div>
        <!-- 预览内容 -->
        <div class="pre-info">
          <div class="pre-info-box">
            <div class="pre-info-title">活动时间</div>
            <div class="pre-info-detail">{{proStartTime}} - {{proEndTime}}</div>
          </div>
          <div class="pre-info-box">
            <div class="pre-info-title">活动对象</div>
            <div class="pre-info-detail">{{formData.activeTarget}}</div>
          </div>
          <div class="pre-info-box">
            <div class="pre-info-title">活动介绍</div>
             <div class="pre-info-detail">{{formData.activeIntroduce}}</div>
          </div>
          <div class="pre-info-box">
            <div class="pre-info-title">活动细则</div>
              <div class="pre-info-detail">
              <span class="radio-info"></span>
              <span>参加方式 : {{formData.activeJoinType}}</span>
              <br />
              <span class="radio-info"></span>
              <span>每人限制参加 : {{formData.activeNum}}</span>
            </div>

          </div>
        </div>
      </div>
    </el-dialog>
    <!--  --------添加商品 -->
    <el-dialog title="添加商品" :visible.sync="dialogTableVisible_good" width="70%">
      <div class="tableSearch tableSearchS">
        <el-form label-width="80px" class="demo-ruleForm">
          <el-form-item label="商品名称:" label-width>
            <el-input
              class="input"
              v-model="dialogShop.shopName"
              size="small"
              placeholder="输入商品名称或商品条码"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品分类:">
            <el-cascader
              size="small"
              props.checkStrictly
              props.expandTrigger="hover"
              :options="commodityCategoryfunList"
              v-model="dialogShop.commodityCategory"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="商品品牌:">
            <el-select
              size="small"
              filterable
              v-model="dialogShop.commodityBrand"
              placeholder="请先选择商品品牌"
            >
              <el-option
                v-for="(item,index) in commodityBrandList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label label-width="130px">
            <el-button @click="ondialogSearch()" size="small" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 选择的商品表格 -->
      <div class="tableMain">
        <el-table :data="dialogGoodsList" tooltip-effect="dark" stripe style="width: 100%">
          <el-table-column type="selection" width="55" align="center" label="请选择">
            <template slot-scope="scope">
              <el-radio
                :label="scope.row.id"
                v-model="dialogRadio"
                @change.native="getTemplateRow(scope.$index,scope.row)"
              >&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">{{scope.$index+ dialogPageSize*(dialogCurrentPage-1) +1}}</template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="goodsSalePrice" label="商品销售价" align="center">
            <template slot-scope="scope">￥{{scope.row.goodsSalePrice}}</template>
          </el-table-column>
          <el-table-column prop="goodsMemberPrice" label="商品会员价" align="center">
            <template slot-scope="scope">￥{{scope.row.goodsMemberPrice}}</template>
          </el-table-column>
          <el-table-column prop="brandName" label="商品品牌" align="center"></el-table-column>
          <el-table-column prop="classifyName" label="商品分类" align="center"></el-table-column>
          <el-table-column prop="goodsUnitName" label="单位" align="center"></el-table-column>
        </el-table>
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="dialogToPage">确定</el-button>
          <el-pagination
            @size-change="dialogHandleSizeChange"
            @current-change="dialogHandleCurrentChange"
            :current-page="dialogCurrentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="dialogPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dialogTotalNum"
          ></el-pagination>
        </div>
      </div>

      <div style="text-align:right;margin-top:20px;">
        <el-button size="small" @click="dialogTableVisible_good = false;changeFlag = true">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from "@/util";
import { mapState } from "vuex";
import coverOne from "assets/images/weChatCoverOne.png";
import coverTwo from "assets/images/weChatCoverTwo.png";
import coverThree from "assets/images/weChatCoverThree.png";
import {
  uploadFile,
  getFile,
  newNotice,
  noticeDetail,
  getGoodsPosListByPage,
  selectByGoodsId,
  getGoodsClassifyTreeList
} from "@/api";

export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    const checkPriorityRating = (rule, value, callback) => {
      if (+value > 10000) {
        return callback(new Error("超过输入范围"));
      } else {
        callback();
      }
    };
    return {
      dialogTableVisible_good: false,
      goodsInfo: true,
      clearable: true,
      dialogPreviewVisible: false, // 预览弹框
      previewHtml: "", // 预览内容
      handle: "",
      isFinished: false, //查看详情时数据是否加载完成
      dataTypeList: [
        {
          name: "门店活动",
          id: 3
        },
        {
          name: "主推商品",
          id: 4
        }
      ], //内容种类列表
      audioUrl: "", //通过audio获取音频时长
      formData: {
        id: "",
        noticeType: 3,
        noticeCover: 0,
        activeName: "",
        activeStartTime: "",
        activeEndTime: "",
        activeContent: "",
        activeTarget: "",
        activeJoinType: "",
        activeNum: "",
        activeIntroduce: "",
        shelfTime: "",
        removeTime: "",
        weight: "",
        goodsId: "",
        goodsName: "",
        goodsPrice: "",
        memberPrice: "",
        goodsImg: "",
        goodsIntroduce: ""
      },
      ruleFormData: {
        noticeType: [
          { required: true, message: "请选择公告类型", trigger: "change" }
        ],
        noticeCover: [
          { required: true, message: "请选择公告封面", trigger: "change" }
        ],
        activeName: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ],
        activeStartTime: [
          { required: true, message: "请输入活动时间", trigger: "blur" }
        ],
        noticeCover: [
          { required: true, message: "请输入活动内容", trigger: "blur" }
        ],
        activeTarget: [
          { required: true, message: "请输入活动对象", trigger: "blur" }
        ],
        activeContent: [
          { required: true, message: "请输入活动介绍", trigger: "blur" }
        ],
        shelfTime: [
          { required: true, message: "请选择上架时间", trigger: "blur" }
        ],
        removeTime: [
          { required: true, message: "请选择下架时间", trigger: "blur" }
        ],
        weight: [{ required: true, message: "请输入权重", trigger: "blur" }],
        goodsIntroduce: [
          { required: true, message: "请输入商品介绍", trigger: "blur" }
        ],
        goodsName: [{ required: true, message: "请选择商品", trigger: "blur" }],
        goodsSelect: [
          { required: true, message: "请选择商品", trigger: "blur" }
        ],
        goodsImg: [{ required: true, message: "请上传图片", trigger: "blur" }],
        activeIntroduce: [{ required: true, message: "请输入活动介绍", trigger: "blur" }]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      deletShow: true,
      dialogShop: {
        shopName: "", //商品弹窗商品名称
        commodityBrand: "", //品牌
        commodityCategory: [""] //分类
      },
      dialogRadio: "",
      dialogCurrentPage: 1,
      dialogPageSize: 5,
      dialogTotalNum: 0,
      dialogGoodsList: [], //列表数据
      dialogChooseData: [], //弹窗选择的数据
      // chooseData: [],
      dialogChooseData: [], //弹窗选择的数据
      commodityCategoryfunList: [], //分类数据
      commodityBrandList: [],
      coverList: [
        {
          value: 0,
          url: coverOne
        },
        {
          value: 1,
          url: coverTwo
        },
        {
          value: 2,
          url: coverThree
        }
      ],
      proStartTime: "",
      proEndTime: ""
    };
  },

  created() {
    this.id = util.getQuery("id");
    this.status = util.getQuery("status"); //  0待上架 ,1已上架 ,2 已下架 ,
    if (this.id != "") {
      this.getDetail();
    }
  },
  mounted() {
    this.commodityCategoryfun();
    this.commodityBrand();
  },
  methods: {
    goBack() {
      this.$confirm("您确定要返回么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.back();
        })
        .catch(() => {});
    },
    //  活动时间校验
    checkActiveTime() {
      if (!this.formData.activeEndTime) {
        return false;
      }
      if (!this.formData.activeStartTime) {
        this.$message.error("开始日期不能为空");
      }

      if (this.formData.activeEndTime <= this.formData.activeStartTime) {
        this.$message.error("结束时间不能小于等于开始时间");
        this.formData.activeEndTime = "";
      }
    },
    // 校验上架下架时间
    checkEndTime() {
      if (!this.formData.removeTime) {
        return false;
      }
      if (!this.formData.shelfTime) {
        this.$message.error("上架不能为空");
      }

      if (this.formData.removeTime <= this.formData.shelfTime) {
        this.$message.error("下架时间不能小于等于上架时间");
        this.formData.removeTime = "";
      }
    },
    // 上传图片之前验证图片格式
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/png" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 < 2000;
      if (!isJPG) {
        this.$message.error("上传图片格式错误!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2M!");
      }
      // 暂不控制上传尺寸
      // const isSize = new Promise(function(resolve, reject) {
      //   let width = 200;
      //   let height = 300;
      //   let _URL = window.URL || window.webkitURL;
      //   let img = new Image();
      //   img.onload = function() {
      //     let valid = img.width == width && img.height == height;
      //     valid ? resolve() : reject();
      //   };
      //   img.src = _URL.createObjectURL(file);
      // }).then(
      //   () => {},
      //   () => {
      //     this.$message.error("上传的图片必须是200px x 300px");
      //     return Promise.reject();
      //   }
      // );

      return isJPG && isLt2M;
    },
    //上传图片
    uploadSectionFile(param) {
      var fileObj = param.file;
      var data = new FormData();
      data.append("file", fileObj);
      data.append("projectName", fileObj.name);
      uploadFile(data).then(res => {
        this.formData.goodsImg = `${getFile}?id=${res.data.id}`;
        this.deletShow = false;
      });
    },
    deleteImg() {
      this.$confirm("您确认要删除当前图片么?", "确认删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.formData.goodsImg = "";
          this.deletShow = true;
        })
        .catch(() => {});
    },
    // 发布公告
    onNewNotice(dataForm) {
      this.$refs[dataForm].validate(valid => {
        if (valid) {
          this.onConfirm();
        } else {
          return false;
        }
      });
    },
    onConfirm() {
      let data = {
          companyId: this.merchantId,
          position: this.formData.noticeType,
          title: this.formData.activeName,
          validityStartTime: this.formData.shelfTime,
          validityEndTime: this.formData.removeTime,
          priorityRating: this.formData.weight,
          appId: 3,
          otherAttributes: {
            titlePage: this.formData.noticeCover,
            activeStartTime: this.formData.activeStartTime,
            activeEndTime: this.formData.activeEndTime,
            activeContent: this.formData.activeContent,
            activeObj: this.formData.activeTarget,
            joinMethod: this.formData.activeJoinType,
            joinTimes: this.formData.activeNum,
            activePresent: this.formData.activeIntroduce,
            goodsId: this.formData.goodsId,
            goodsName: this.formData.goodsName,
            goodsSalePrice: this.formData.goodsPrice,
            goodsMemberPrice: this.formData.memberPrice,
            goodsImage: this.formData.goodsImg,
            goodsInfo: this.formData.goodsIntroduce
          }
        },
        message = "添加成功";
      if (this.id != "") {
        data.id = this.id;
        message = "编辑成功";
      }
      if(this.formData.noticeType == 3 && !this.formData.activeEndTime){
        this.$message.error("请填写活动结束时间")
      }else {
      newNotice(data).then(res => {
        if (res.code == 200) {
          this.$message.success(message);
          this.back();
        }
      });
      }

    },
    //清除验证提示
    clearValidate(item = "") {
      this.$refs["dataForm"].clearValidate([item]);
    },
    //字符串过滤
    replace(obj, key) {
      let that = this;
      let event = event || window.event;
      if (event.keyCode == 13) {
        setTimeout(() => {
          that.validItem(obj, key);
        }, 100);
      } else {
        that.validItem(obj, key);
      }
    },
    validItem(obj, key) {
      let res = "";
      switch (key) {
        case "priorityRating":
          res = util.replaceNumber(obj[key]);
          break;
        case "price":
          res = util.replaceNum(obj[key], 6);
          break;
      }
      this.$set(obj, key, res);
    },
    //路由跳转列表页
    routerPush(status) {
      util.routerTo("/app-management/online-classroom/onlineClassroom-list", {
        status: status
      });
      this.$store.commit("SET_ISRELOADDATA", true);
      return;
    },
    preCover() {
      this.dialogPreviewVisible = true;
      this.previewHtml = "";
    },
    preInfo() {
      this.proStartTime = this.onTurnTime(this.formData.activeStartTime);
      this.proEndTime = this.onTurnTime(this.formData.activeEndTime);
      this.dialogPreviewVisible = true;
      this.previewHtml = "";
    },

    //提示框
    tipsBox(txt, type) {
      this.$message({
        message: txt,
        type: type
      });
    },
    back() {
      util.routerTo("/operate-management/notice-management/notice-list");
      return;
    },
    getTemplateRow(index, row) {
      this.formData.goodsId = row.goodsShopId;
      this.formData.goodsName = row.name;
      this.formData.goodsPrice = row.goodsSalePrice;
      this.formData.memberPrice = row.goodsMemberPrice;
    },
    dialogSure() {
      this.dialogTableVisible_good = false;
    },
    dialogHandleSizeChange(val) {
      this.changeFlag = false;
      this.dialogPageSize = val;
      this.dialogGetGoods(this.dialogPageSize, 1);
    },
    dialogToPage() {
      this.dialogGetGoods(this.dialogPageSize, this.dialogCurrentPage);
    },
    dialogHandleCurrentChange(val) {
      this.changeFlag = false;
      this.dialogCurrentPage = val;
      this.dialogGetGoods(this.dialogPageSize, this.dialogCurrentPage);
    },
    opendialogToPage(){
      this.dialogGetGoods(this.dialogPageSize, 1);
    },
    // 商品品牌
    commodityBrand() {
      selectByGoodsId({
        repositoryId: "",
        shopId: this.merchantId
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.commodityBrandList = res.data.list;
      });
    },
    // 商品品类
    commodityCategoryfun() {
      getGoodsClassifyTreeList().then(res => {
        let a = {
          value: "",
          label: "全部"
        };
        res.data.unshift(a);
        this.commodityCategoryfunList = res.data;
      });
    },
    // 商品列表数据
    dialogGetGoods(pageSize, pageNum) {
      let primaryClassifyId =
        this.dialogShop.commodityCategory[
          this.dialogShop.commodityCategory.length - 1
        ] || "";

      let data = {
        brandId: this.dialogShop.commodityBrand,
        primaryClassifyId: primaryClassifyId,
        shopId: this.merchantId,
        pageSize: pageSize,
        pageNo: pageNum
      };
      if (/^\d+$/.test(this.dialogShop.shopName)) {
        data["barCode"] = this.dialogShop.shopName; // 根据编号搜索
      } else {
        data["name"] = this.dialogShop.shopName; // 根绝名称搜索
      }
      getGoodsPosListByPage(data).then(res => {
        if (res.code == 200) {
          this.dialogGoodsList = res.data.list;
          this.dialogGoodsList.forEach(item => {
            this.$set(item, "isShow", false);
          });
        } else {
          this.dialogGoodsList = [];
        }
        this.dialogCurrentPage=pageNum;
        this.dialogTotalNum = res.data.total;
      });
    },
    ondialogSearch() {
       this.dialogGetGoods(this.dialogPageSize, 1);
    },
    getDetail() {
      var data = new FormData();
      data.append("id", this.id);
      noticeDetail({
        'id': this.id
      }).then(res => {
        if (res.code == 200) {
          (this.formData.noticeType = res.data.position),
            (this.formData.activeName = res.data.title),
            (this.formData.shelfTime = res.data.validityStartTime),
            (this.formData.removeTime = res.data.validityEndTime),
            (this.formData.weight = res.data.priorityRating),
            (this.formData.noticeCover = res.data.otherAttributes.titlePage),
            (this.formData.activeStartTime =
              res.data.otherAttributes.activeStartTime),
            (this.formData.activeEndTime =
              res.data.otherAttributes.activeEndTime),
            (this.formData.activeContent =
              res.data.otherAttributes.activeContent),
            (this.formData.activeTarget = res.data.otherAttributes.activeObj),
            (this.formData.activeJoinType =
              res.data.otherAttributes.joinMethod),
            (this.formData.activeNum = res.data.otherAttributes.joinTimes),
            (this.formData.activeIntroduce =
              res.data.otherAttributes.activePresent),
            (this.formData.goodsId = res.data.otherAttributes.goodsId),
            (this.formData.goodsName = res.data.otherAttributes.goodsName),
            (this.formData.memberPrice =
              res.data.otherAttributes.goodsMemberPrice),
               (this.formData.goodsPrice =
              res.data.otherAttributes.goodsSalePrice),
            (this.formData.goodsImg = res.data.otherAttributes.goodsImage),
            (this.formData.goodsIntroduce = res.data.otherAttributes.goodsInfo);

          if (this.status == 2) {
            this.formData.shelfTime = "";
            this.formData.removeTime = "";
          }

          if(this.status == 1) {
            this.deletShow = true
          }else {
            this.deletShow = false
          }
        }
      });
    },
    onLimitNumber(value) {
      this.formData.weight = util.replaceNumber(this.formData.weight);
      if (this.formData.weight > 10000) {
        this.formData.weight = 0;
        this.$message.error("输入范围在0-10000");
      }
    },
    isZero(m) {
      return m < 10 ? "0" + m : m;
    },
    onTurnTime(timeL) {
      //时间戳是整数，否则要parseInt转换
      var time = new Date(timeL); // 需要使用Date格式进行日期转化，若是时间戳、字符串时间，需要通过new Date(..)转化

      var y = time.getFullYear();

      var m = time.getMonth() + 1;

      var d = time.getDate();

      var h = time.getHours();

      var mm = time.getMinutes();

      var s = time.getSeconds();

      return (
        y +
        "-" +
        this.isZero(m) +
        "-" +
        this.isZero(d) +
        " " +
        this.isZero(h) +
        ":" +
        this.isZero(mm) +
        ":" +
        this.isZero(s)
      );
    }
  }
};
</script>

<style lang='less' scoped>
.pages-details1 {
  min-width: 800px;
  padding-left: 35px;

  .tips {
    color: darkgray;
    line-height: 20px;
  }

  .preview-dialog {
    .preview-container {
      overflow-x: hidden;
      overflow-y: scroll;
      height: 600px;
      width: 375px;
      margin: -15px -20px;
      padding: 0px 15px;
      box-sizing: border-box;
      img {
        display: block;
        width: 100%;
      }
    }
  }
}
.el-card {
  margin-left: -28px !important;
  width: 620px;
  margin-bottom: 20px;
}
.weight-input {
  width: 19%;
}
.tip {
  font-size: 12px;
  color: #868181;
}
.imgbox {
  display: inline-block;
  border: 1px dashed #dcdfe6;
}
.imgbox-v {
  width: 200px;
  height: 200px;
}
.imgbox img {
  display: block;
  width: auto;
  height: 200px;
}
.upload-btn {
  width: 100%;
  margin: 10px 0;
}
.delete-img {
  position: absolute;
  bottom: 11px;
  left: 105px;
}
.goods-active-start {
  margin-bottom: 18px;
}
.pre-info {
  margin-top: 20px;
  .pre-info-box {
    position: relative;
    margin-bottom: 40px;
    .pre-info-title {
      position: absolute;
      top: -28px;
      left: -12px;
      line-height: 15px;
      padding: 13px;
      background: url("../../../assets/images/pretitleImg.png");
      font-size: 16px;
      font-family: PingFangSC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 9px;
    }
    .pre-info-detail {
      padding: 10px 5px;
      border: 5px solid #fad68c;
      font-size: 14px;
      color: #666;
      line-height: 28px;
      .radio-info {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: rgba(254, 184, 34, 1);
        border-radius: 4px;
      }
    }
  }
}
.el-radio__label {
  img {
    width: 80%;
  }
}
</style>
<style scoped>
.preview-container div >>> img {
  display: block !important;
}

</style>
<style lang='less'>
.el-picker-panel__link-btn.el-button--text {
  display: none
}
.tableMain .el-radio__label {
  display: none !important;
}
.pages-details1 {
  .el-dialog__header {
    background: #409eff;

    .el-dialog__title {
      color: #fff;
    }
  }

  .preview-dialog {
    .el-dialog__header {
      border-top-right-radius: 30px;
      border-top-left-radius: 30px;
    }

    .el-dialog {
      border-radius: 30px;

      .el-icon {
        color: #fff;
      }
    }
  }
}

.el-select-dropdown {
  z-index: 20000 !important;
}
</style>

